<template>
  <div>
    <h1>axios请求示例</h1>
    <div>
      <div>
        <button type="button" @click="requestGetRolesPageHandler">角色分页列表</button>
        <button type="button" @click="postRolesHandler">新增角色</button>
        <button type="button" @click="putRolesByRoleID">put修改数据</button>
        <button type="button" @click="deleteRolesByids">delete:删除角色</button>
        <button type="button" @click="patchRolesStatusByRoleID">patch:更新角色状态</button>
      </div>

      <hr />

      <div>
        <ul>
          <li v-for="item in roles" :key="item.id">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  requestGetRolesPage,
  addRole,
  delRole,
  editRole,
  editRoleStaus
} from '@/service/study5/demo2'
import { ref } from 'vue'

// export interface IRole {
//   code: string
//   createTime: string
//   id: number
//   name: string
//   sort: number
//   status: number
// }

import { type RolesType } from '@/service/study5/demo2'

const roles = ref<RolesType[]>([])
// 角色分页列表
const requestGetRolesPageHandler = async () => {
  const res = await requestGetRolesPage({ pageNum: 1, pageSize: 40 })
  console.log(res.data.list)
  roles.value = res.data.list
}

const postRolesHandler = async () => {
  const newRole = {
    id: 200,
    name: '333',
    code: '7878',
    sort: 2,
    status: 1,
    dataScope: 3
  }

  const res = await addRole(newRole)

  console.log(res.data.data)
}

// 修改角色
const putRolesByRoleID = () => {
  editRole('9', {
    code: '999922',
    name: '修改的name',
    sort: 1,
    status: 1
  })
}
// 删除角色
const deleteRolesByids = () => {
  delRole('9')
}
// 更新角色状态
const patchRolesStatusByRoleID = () => {
  editRoleStaus('9', 0)
}
</script>

<style lang="scss" scoped>
button {
  margin: 10px;
}
</style>
